<!-- 文件上传 -->
<template>
  <div class="upload-files" >
    <div class="ivu-upload-drag" ref="upload">
      <div style="padding: 20px 0px;" >
        <input type="file"  @change="addInputFile($event)" multiple="multiple" :disabled="isUpload">
        <i  
          class="ivu-icon ivu-icon-ios-cloud-upload" 
          style="font-size: 52px;"
          :style="isUpload?{color:'rgb(187, 191, 255)'}:{color:'rgb(51, 153, 255)'}"></i>
        <p >拖动图片至此或点击上传</p>
        <template v-for="item,index in files">
          <UploadFile 
            :fileObject="item" 
            :fileIndex="index" 
            :classify="classify"
            @upsuc="upsuc" 
            :key="index"></UploadFile>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
  import UploadFile from './UploadFile'
  export default {
    name:'UploadFiles',
    components: {
      UploadFile
    },
    props:{
      //允许文件个数默认为5
      filesLength: {
        type: Number,
        default: 5
      },
      classify:{//上传到哪个类目
        type: [Number,String],
        default: 0
      }
    },
    data(){
      return{
        files:[],//文件
      }
    },
    created: function() {
      
    },
    mounted: function () {
      this.addFile();
    },
    computed: {
      isUpload:function(){
        return this.files.length > 0 ;
      }
    },
    methods: {
      //拖动上传
      addFile:function(){
        let dropbox = this.$refs.upload, inputfile=this.$refs.file,that=this;
        //阻止系统事件
        dropbox.addEventListener("dragenter", function(e){
          e.stopPropagation(); 
          e.preventDefault(); 
        }, false);  
        dropbox.addEventListener("dragover", function(e){ 
          e.stopPropagation(); 
          e.preventDefault(); 
        }, false); 
        dropbox.addEventListener("drop", function(e){
          e.stopPropagation();
          e.preventDefault();
          let files = e.dataTransfer.files;//取得拉过来的图片
          if(!that.isUpload){
            let fl=files.length-1;
            for (fl; fl >= 0; fl--) {
              if(that.files.length>that.filesLength-1){
                that.files.shift();
              }
              let item = {
                name: files[fl].name,
                size: files[fl].size,
                file: files[fl],
                isUpload:false,
              }
              that.files.push(item);
            }
          }
        }, false);
      },
      //点击选择文件
      addInputFile:function(event){
        if(this.isUpload){
          return;
        }
        let files=event.target.files;
        let fl=files.length-1;
        for (fl; fl >= 0; fl--) {
          if(this.files.length>this.filesLength-1){
              this.files.shift();
          }
          let item = {
            name: files[fl].name,
            size: files[fl].size,
            file: files[fl],
            isUpload:false,
          }
          this.files.push(item);
        }
        event.target.value=null;
      },
      upsuc:function(index){
        let isNotInUpload=true;
        this.files.forEach((item)=>{
          if(!item.isUpload){
            isNotInUpload=false;
          }
        });
        if(isNotInUpload){
          this.files=[];
          this.$store.dispatch('changeImgArr');
        }
      }
    }
  }
</script>
<style >
  

</style>
